<template>
	<view class="productLink" :style="{width:width,backgroundColor:backgroundColor,marginRight:width=='636rpx'?'30rpx':''}" v-if="message.shopPrice||message.shopPrice==0">
		<image src="/static/svg/delete2.svg" mode="" class="dele" v-if="isNeedDele" @tap="toDele"></image>
		<image :src="message.shopImage" mode=""></image>
		<image src="/static/svg/shoppingCart.svg" mode="" class="shoppingCart" v-if="isNeedCart"></image>
		<view>
			<text>{{message.shopContent}}</text>
			<text><text class="fistWord">¥</text>{{message.shopPrice.toFixed(2)}}</text>
		</view>
	</view>
</template>

<script>
	export default {
		props: {
			width: {
				type:String,
				default:"690rpx"
			},
			backgroundColor: {
				type:String,
				default:"#F4F4F4"
			},
			isNeedDele:{
				type:Boolean,
				default:true
			},
			isNeedCart:{
				type:Boolean,
				default:false
			},
			index:{
				type:Number,
				default:0
			},
			message:{
				type:Object,
				default(){
					return {}
				}
			},
		},
		methods: {
			toDele() {
				this.$emit("toDele",this.index)
			}
		},
	}
</script>

<style lang="scss">
.productLink{
	height: 140rpx;
	background-color: #F4F4F4;
	border-radius: 10rpx;
	display: flex;
	align-items: center;
	padding-left: 20rpx;
	margin-top: 30rpx;
	position: relative;
	image{
		height: 100rpx;
		width: 100rpx;
		border-radius: 10rpx;
	}
	.dele{
		position: absolute;
		right: -8rpx;
		top: -8rpx;
		height: 40rpx;
		width: 40rpx;
		border-radius:unset;
	}
	.shoppingCart{
		height:50rpx ;
		width: 50rpx;
		border-radius: unset;
		position: absolute;
		right: 20rpx;
		bottom: 38rpx;
	}
	view{
		display: flex;
		height: 100rpx;
		flex-flow: column;
		justify-content: space-between;
		margin-left: 20rpx;
		text{
			font-size: 26rpx;
			letter-spacing: 1rpx;
			line-height: 26rpx;
		}	
	}
}	
.productLink>view>text:first-of-type{
	color: #333333;
	position: relative;
	top: 2rpx;
}
.productLink>view>text:nth-of-type(2){
	color: #F54725;
	font-weight: bold;
	position: relative;
	bottom: 5rpx;
}
.fistWord{
	font-weight: normal !important;
}
</style>
